/**
 * 弹出框 - 发布
 */
/**
 * TODO formitem 样式
 */


import React from 'react'
import PropTypes from 'prop-types'
import {TreeSelectCom} from 'components'
import {Form, Radio, Row, Col, Tree, Select, Modal, Icon, Cascader} from 'antd'
import city from 'utils/city'

const ColProps = {
  xs: 24,
  sm: 12,
  style: {
    marginBottom: 16,
  },
}

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
}

const TreeNode = Tree.TreeNode
const Option = Select.Option
const FormItem = Form.Item
const RadioButton = Radio.Button
const RadioGroup = Radio.Group

const LinkPubModal = ({
                        item = {},
                        editorItem = '',
                        modalPubTreeData,
                        modalPubTreeDataPgPletId,
                        onOk,
                        onCheck,
                        editorProps,
                        handleRadioChange,
                        form: {
                          getFieldDecorator,
                          validateFields,
                          getFieldsValue,
                        },
                        ...pubModalProps
                      }) => {

  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
      }
      console.log(data)
      onOk(data)
    })
  }

  const modalOpts = {
    ...pubModalProps,
    onOk: handleOk,
  }

  const tree = [{
    id: '1',
    pid: '0',
    value: '',
    label: '预算管理',
    children: [
      {
        id: '2',
        pid: '1',
        value: 'article-10132',
        label: '通知公告',
      },
    ],
  }, {
    id: '2',
    pid: '0',
    value: '1_',
    label: '预算管理',
    children: [
      {
        id: '2',
        pid: '1',
        value: 'article-10132',
        label: '通知公告',
      },
    ],
  }]

  // 根据 label 查询
  const cascaderSearch = (inputValue, path) => {
    return (path.some(option => (option.label).toLowerCase().indexOf(inputValue.toLowerCase()) > -1))
  }

  // 展开时显示最近选择
  const displayRender = (label) => {
    return label[label.length - 1]
  }

  return (
    <Modal {...modalOpts} >

      <Form>

        <FormItem
          {...formItemLayout}
          label="发布对象"
        >
          {getFieldDecorator('toWho',
            {
              initialValue: "",
              rules: [{
                required: true,
                message: "请选择发布对象",
              }],
            },
          )(
            <RadioGroup onChange={e => handleRadioChange(e)}>
              <Radio value="region">单位</Radio>
              <Radio value="role">角色</Radio>
            </RadioGroup>,
          )}
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="发布位置"
        >
          <Row gutter={24} type='flex' justify='left'>
            <Col {...ColProps} xl={{span: 23}} md={{span: 23}} id="addressCascader">
              {getFieldDecorator('address',
                {
                  initialValue: "",
                  rules: [
                    {
                      required: true,
                      message: "请选择发布单位或角色",
                    },
                  ],
                })(<Cascader
                style={{width: '100%'}}
                options={modalPubTreeData}
                // 加入字段转换
                fieldNames={{ label: 'label', value: 'code', children: 'children' }}
                placeholder="请选择单位或角色"
                expandTrigger="hover"
                showSearch={{ cascaderSearch }}
                popupPlacement={"topLeft"}
                getPopupContainer={() => document.getElementById('addressCascader')}
              />)}
            </Col>
          </Row>
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="发布频道"
        >
          <Row gutter={24} type='flex' justify='left'>
            <Col {...ColProps} xl={{span: 23}} md={{span: 23}} id="pgPletIdCascader">
              {getFieldDecorator('pgPletId',
                {
                  initialValue: "",
                  rules: [
                    {
                      required: true,
                      message: "请选择发布频道",
                    },
                  ],
                })(<Cascader
                style={{width: '100%'}}
                options={modalPubTreeDataPgPletId}
                // 加入字段转换
                fieldNames={{ label: 'label', value: 'code', children: 'children' }}
                placeholder="请选择发布频道"
                expandTrigger="hover"
                showSearch={{ cascaderSearch }}
                popupPlacement={"topLeft"}
                getPopupContainer={() => document.getElementById('pgPletIdCascader')}
              />)}
            </Col>
          </Row>
        </FormItem>

      </Form>

    </Modal>
  )
}

LinkPubModal.propTypes = {
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(LinkPubModal)
